<template name="layout_header">
    <nav>
        <ul>
            <li>
                <a href="{{pathFor route='dashboard'}}" class="{{isActiveRoute regex='dashboard'}}">
                    <i class="icon-wallet"></i>
                    <span>{{i18n 'wallet.app.buttons.wallet'}}</span>
                </a>
            </li>
            <li>
                <a href="{{goToSend}}" class="{{isActiveRoute regex='send'}}">
                    <i class="icon-arrow-up"></i>
                    <span>{{i18n 'wallet.app.buttons.send'}}</span>
                </a>
            </li>            
            <li class="block-syncing {{#if TemplateVar.get 'syncing'}}syncing{{/if}}">
                {{#if isWalletMode}}
                    {{#if $eq ($.Session.get "network") "test"}}
                        <span class="private-chain" title="{{i18n 'wallet.app.texts.testnetExplain'}}">Test-net</span> &nbsp;&nbsp; 
                    {{/if}}
                    {{#if $eq ($.Session.get "network") "rinkeby"}}
                        <span class="private-chain" title="{{i18n 'wallet.app.texts.testnetExplain'}}">Rinkeby</span> &nbsp;&nbsp; 
                    {{/if}}
                    {{#if $eq ($.Session.get "network") "ropsten"}}
                        <span class="private-chain" title="{{i18n 'wallet.app.texts.testnetExplain'}}">Ropsten</span> &nbsp;&nbsp; 
                    {{/if}}
                    {{#if $eq ($.Session.get "network") "kovan"}}
                        <span class="private-chain" title="{{i18n 'wallet.app.texts.testnetExplain'}}">Kovan</span> &nbsp;&nbsp; 
                    {{/if}}
                    {{#if $eq ($.Session.get "network") "private"}}
                        <span class="private-chain" title="{{i18n 'wallet.app.texts.testnetExplain'}}">Private-net</span> &nbsp;&nbsp; 
                    {{/if}}

                    {{#with TemplateVar.get "syncing"}}
                        <span class="text">
                            <i class="icon-feed"></i> {{$.Session.get "peerCount"}} <span class="hide-on-small">{{i18n 'wallet.app.texts.peers'}}</span>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="icon-layers"></i> {{i18n "wallet.app.texts.nodeSyncing" blockDiff=blockDiff}}
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i class="icon-cloud-download"></i> {{progress}}%
                            <br>
                        </span>
                        <progress max="100" value="{{progress}}"></progress>
                    {{else}}
                        {{#if $eq ($.Session.get "peerCount") 100}}
                            {{! Infura returns 100 for net_peerCount, so we have 100 peers then show a 'Remote' label instead }}
                            <i class="icon-feed"></i> <span title="{{i18n 'wallet.app.texts.remoteExplain'}}">{{i18n 'wallet.app.texts.remote'}}</span>
                        {{else if $gt ($.Session.get "peerCount") 0}}
                            <i class="icon-feed"></i> {{$.Session.get "peerCount"}} <span class="hide-on-small">{{i18n 'wallet.app.texts.peers'}}</span>
                        {{else}}
                            <i class="icon-feed"></i> {{i18n 'wallet.app.texts.connecting'}}
                        {{/if}}
                        &nbsp;&nbsp;<span class="sync-divider">|</span>&nbsp;&nbsp;
                        <i class="icon-layers"></i> {{formattedBlockNumber}} <i class="icon-clock" style="margin-left: 10px;"></i> {{{timeSinceBlock}}} <span class="hide-on-small">{{{timeSinceBlockText}}}</span>
                    {{/with}}
                {{/if}}
            </li>
            <li>
                <a href="{{pathFor route='contracts'}}" class="{{isActiveRoute regex='contracts'}}">
                    <i class="icon-docs"></i>
                    <span>{{i18n 'wallet.app.buttons.contracts'}}</span>
                </a>
            </li>
            <li class="wallet-balance">
                <h3>{{i18n 'wallet.app.texts.balance'}}</h3>
                {{> elements_balance balance=totalBalance changeUnit=true}}
            </li>

            </ul>
    </nav>
</template>